<template>
  <div class="content">
    <div class="check"><span>运单查询</span></div>
    <div class="body">
      <div>
        <div class="input-wrap">
          <el-input v-model="input" placeholder="可按运单号或关键字查询" />
        </div>
        <div class="click-btn">
          <el-button type="danger">查询</el-button>
        </div>
      </div>
      <div>
        <ul>
          <li
            v-for="item in serviceName"
            :key="item.id"
            :class="{ active: isActive === item.id }"
            @click="changeServiceAndFetchData(item.id)"
          >
            <div>
              {{ item.name }}
            </div>
          </li>
        </ul>
      </div>
      <div>
        <div class="bread">
          <el-page-header>
            <template #breadcrumb>
              <el-breadcrumb separator=">>">
                <el-breadcrumb-item :to="{ path: './page-header.html' }">
                  订单
                </el-breadcrumb-item>
                <el-breadcrumb-item
                  ><a href="./page-header.html">订单详情</a></el-breadcrumb-item
                >
              </el-breadcrumb>
            </template>
          </el-page-header>
        </div>
        <div id="outer-wrap">
          <div v-if="hasOrder" class="table-wrap">
            <el-table
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="orderTableData"
              style="width: 100%"
              max-height="300"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="order_id" label="订单编号" width="120" />
              <el-table-column prop="express_method" label="快递方式" width="120" />
              <el-table-column prop="delivery_status" label="配送状态" width="120" />
              <el-table-column prop="order_time" label="下单时间" width="180" />
              <el-table-column prop="tracking_number" label="快递单号" width="120" />
              <el-table-column prop="warehouse" label="发货仓库" width="120" />
              <el-table-column prop="whenPay" label="付款状态" width="160" />
              <el-table-column fixed="right" label="操作" width="120">
                <template v-if="isActive === 1" #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="toSpecific(scope.row)"
                  >
                    查看详情
                  </el-button>
                </template>
                <template v-else #default="scope">
                  <el-button v-if="hasSignFor" link type="primary" size="small" disabled>
                    已签收
                  </el-button>
                  <el-button
                    v-else
                    link
                    type="primary"
                    size="small"
                    @click="signFor(scope.row)"
                  >
                    签收
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <div class="empty-wrap">
              <div class="empty">
                <img src="https://cityexpress.yellowswimming.cn/img/noData.png" alt="" />
              </div>
            </div>

            <div class="noInfo">
              <p>暂无运单信息</p>
            </div>
            <div class="to-order">
              <el-button type="danger" @click="toOrder">马上下单</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import axios from "axios";
import { useAuthStore } from "@/store/userInfo";
const authStore = useAuthStore();
let hasOrder = ref<boolean>(false);
const $router = useRouter();
const route = useRoute();
const newOrderId = route.query.orderId;
const blinkOrderId = ref<any>(newOrderId); // 用于控制闪烁的订单ID
let input = ref<string>("");
let hasSignFor = ref<boolean>(false);

interface Service{
  id: number;
  name: string;
}
const serviceName = reactive<Service[]>([
  { id: 1, name: "我寄的" },
  { id: 2, name: "我收的" },
]);
let isActive = ref<number>(1);

// 定义一个方法来为特定的行添加类名
  const tableRowClassName = ({ row }: { row: { order_id: string | number } }) => {
    return row.order_id === blinkOrderId.value ? 'blink' : '';
  };



// 设置一个定时器，比如30秒后停止闪烁
setTimeout(() => {
  blinkOrderId.value = null; // 清空或设置为无效值，停止闪烁
}, 30000); // 30秒后停止闪烁

interface TableData{
  order_id: string | number;
  express_method: string;
  delivery_status: string;
  order_time: string;
  tracking_number: string;
  warehouse: string;
  whenPay: string;
}
const orderTableData = ref<TableData[]>([]);
const baseUrl = "http://localhost:8085";
const getOrdersBySenderName = () => {
  orderTableData.value = [];
  axios
    .get(baseUrl + `/sender/getOrdersBySenderName/${authStore.username}`)
    .then((response) => {
      const data = response.data;
      if (data.length == 0) {
        hasOrder.value = false;
      } else {
        hasOrder.value = true;
        for (let i = 0; i < data.length; i++) {
          let TableData = reactive({
            order_id: data[i].orderId,
            express_method: data[i].expressMethod,
            delivery_status: data[i].deliveryStatus,
            order_time: data[i].orderTime,
            tracking_number: data[i].trackingNumber,
            warehouse: data[i].warehouse,
            whenPay: data[i].whenPay,
          });
          orderTableData.value.push(TableData);
        }
      }
    })
    .catch((error) => {
      // 请求失败处理
      console.error("Error:", error);
    });
};

const getOrdersByReceiverName = () => {
  orderTableData.value = [];
  axios
    .get(baseUrl + `/recv/getOrdersByReceiverName/${authStore.username}`, {})
    .then((response) => {
      const data = response.data;
      if (data.length == 0) {
        hasOrder.value = false;
      } else {
        hasOrder.value = true;
        for (let i = 0; i < data.length; i++) {
          let TableData = reactive({
            order_id: data[i].orderId,
            express_method: data[i].expressMethod,
            delivery_status: data[i].deliveryStatus,
            order_time: data[i].orderTime,
            tracking_number: data[i].trackingNumber,
            warehouse: data[i].warehouse,
            whenPay: data[i].whenPay,
          });
          orderTableData.value.push(TableData);
        }
      }
    })
    .catch((error) => {
      // 请求失败处理
      console.error("Error:", error);
    });
};
onMounted(() => {
  getOrdersBySenderName();
});


const serviceToFuncMap = {
  1: getOrdersBySenderName,
  2: getOrdersByReceiverName
  // 可以在这里添加更多服务类型和对应的函数
};

function changeServiceAndFetchData(index:number) {
  isActive.value = index;
  //@ts-ignore
  const fetchDataFunc = serviceToFuncMap[index];
  if (fetchDataFunc) {
    fetchDataFunc();
  }
}
const toSpecific = (row: any) => {
  $router.push({
    name: "shipDetail",
    params: { orderId: row.order_id },
  });
};

const signFor = (row: any) => {
  ElNotification.success({
        title: "Success",
        message: "签收成功",
        offset: 100,
      });
  hasSignFor.value = true;
};
const toOrder = () => {
  $router.push({
    path: "/ship/send/normal",
  });
};
</script>

<style scoped lang="less">
 @keyframes blink {
   0% {
     background-color: transparent;
   }

   50% {
     background-color: #ffff99;
   }

   /* 闪烁的颜色 */
   100% {
     background-color: transparent;
   }
 }

 .blink {
   animation: blink 1.5s linear infinite;
 }
.content {
  position: absolute;
  width: 80vw;
  height: 82vh;

  margin: 10px 0 0 0;
  right: 4px;
  display: flex;
  flex-direction: column;
  .check {
    flex: 1;
    background-color: white;
    margin-bottom: 1rem;
    border-radius: 1rem;
    margin-right: 2vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    span {
      margin-left: 1rem;
      font-size: 1.2rem;
    }
  }
  .body {
    background-color: white;
    border-radius: 0.8rem;
    flex: 8;
    margin-right: 2vw;
    display: flex;
    flex-direction: column;
    > div:first-child {
      flex: 1;

      display: flex;
      .input-wrap {
        flex: 5;
        padding: 0 1rem 0 1rem;

        display: flex;
        align-items: center;
        justify-content: center;
      }
      .click-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .el-button {
          width: 8rem;
        }
      }
    }
    > div:nth-child(2) {
      flex: 1;

      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #c0c4cc;
      ul {
        list-style: none;

        padding: 0;
        margin: 0;
        height: 80%;
        width: 16rem;

        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
          list-style-type: none;
          display: flex;
          justify-content: flex-start;
          
          font-size: 1rem;
          height: 50%;
          color: #949494;
          text-align: center;
          > div {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
          }
          &:hover {
            cursor: pointer;
            color: red;
          }
        }

        .active {
          border-bottom: 3px solid red;
        }
      }
    }
    > div:nth-child(3) {
      flex: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .bread {
        flex: 2;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        position: relative;
        :deep(.el-page-header) {
          position: absolute;
          left: 1rem;
          top: 1rem;
        }
      }
      #outer-wrap {
        flex: 9;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .empty-wrap {
          height: 60%;
          width: 100%;
          .empty {
            width: 30%;
            height: 100%;
            margin: 0 auto;

            img {
              height: 100%;
              width: 100%;

              object-fit: contain; /* 保持纵横比，完全容纳在容器内 */
            }
          }
        }
        .noInfo {
          height: 20%;

          display: flex;
          justify-content: center;
          align-items: center;
        }
        .to-order {
          height: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-button {
            width: 8rem;
          }
        }
      }
    }
  }
}
</style>
